<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="header.jsp"%>

<%--<jsp:include page="header.jsp"/>--%>

<main>
    <div class="jumbotron" style="margin-left: 80px;margin-right: 80px;padding:0;margin-bottom: 20px;border-radius: 15px;">
        <div class="container" style="padding: 0 3px;border-radius: 15px;">
            <div style="width: 100%;height: 250px;margin-top: 3px;margin-bottom: 3px;position: relative;
            /* background-color: #fff; */
            border-radius: 15px;overflow: hidden">
<%--            <h1>Hello world!</h1>--%>
<%--            <img src="./img/1.jpg" style="width: 100%;max-height: 250px;margin-top: 3px;margin-bottom: 3px">--%>
            <ul class="images-lun">
                <li class="img-lun"></li>
                <li class="img-lun"></li>
                <li class="img-lun"></li>
                <li class="img-lun"></li>
                <li class="img-lun"></li>
            </ul>
            <ul class="min">
                <li class="m"></li>
                <li class="m"></li>
                <li class="m"></li>
                <li class="m"></li>
                <li class="m"></li>
            </ul>
            <div class="button-lun">
                <div class="button-left">&lt;</div>
                <div class="button-right">&gt;</div>
            </div>
            </div>
        </div>
    </div>
    <section>
        <h4>好书推荐阅读</h4>
        <div class="novel-list">
            <c:forEach var="novel" items="${novelList}">
                <div class="novel-item">
                    <a href="NovelDetailServlet?novel_id=${novel.novel_id}"><img src="${novel.cover_image_url}"  alt="图片获取失败！" class="novel-cover"></a>
                    <div class="novel-content">
                        <a href="NovelDetailServlet?novel_id=${novel.novel_id}"><h5 class="novel-title">${fn:substring(novel.title, 0, 12)}</h5></a>
                        <p class="novel-author">作者：${novel.author}</p>
                        <p class="novel-status">状态：${novel.statu_s}</p>
                        <p class="novel-update-time">更新时间：${novel.update_time}</p>
                        <p class="novel-latest-chapter">简介：${fn:substring(novel.description, 0, 10)}...</p>
                    </div>
                </div>
            </c:forEach>
        </div>
    </section>
</main>


<script>
    // 获取所有类名为 'novel-cover' 的图片
    var images = document.getElementsByClassName('novel-cover');
    for (var i = 0; i < images.length; i++) {
        // 为每个图片添加 onerror 事件处理函数
        images[i].onerror = function() {
            this.onerror = null; // 防止无限循环
            this.src = 'novelimg/none.jpg'; // 替换为本地图片路径
        };
    }
</script>

<script>
    let imagesLun = document.querySelector('.images-lun')
    let m = document.querySelectorAll('.m')
    let left = document.querySelector('.button-left')
    let right = document.querySelector('.button-right')
    //我们先设置一个index用来计算和控制图片的位置，再设置一个time作为定时器
    let index = 0
    //在这里我们先创建一个position为复用函数，作用就是结合index来定义当前图片的位置的
    let time = null
    function position(){
        imagesLun.style.left = (index*-100)+'%'
    }
    //     然后我们创建一个复用函数add为加函数，如果当前图片的位置值index大于等于当前图片数量的话
    // 就说明超出了计算范围，所以得清零，如若不然index就加1
    function add(){
        if(index >= m.length-1){
            index = 0
        }else{
            index++
        }
    }
    // desc为减函数，如果当前图片的位需值index小于1了，那么他的值就反弹到最顶端，也就是轮播图的最后面，如若不然index就减1
    function desc(){
        if(index < 1){
            index = m.length-1
        }else{
            index--
        }

    }
    // 创建一个timer来当做复用时间的函数，每隔3秒钟index就加1，然后加入增加add函数和desc函数来判断一下，再加入定位函数
    // 轮播图
    function timer(){
        time = setInterval(()=>{
            index++
            desc()
            add()
            position()
        },3000)
    }
    // 接下来我们设需一下按钮，left为左边的按钮，因为点击时图片会反方向倒退，所以我们套入desc减函数进去，顺使定位一
    //点击的时候我们必须先把定时器给停掉再重新执行一遍，不然会在你点击下一张图片时，定时器倒计时一到也跟着生效，这样子就会连跳两张图片了
    left.addEventListener('click',()=>{
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener('click',()=>{
        add()
        position()
        clearInterval(time)
        timer()
    })
    // 在弄好左右两个按钮的时候，我们还需要生效下面的小图片按钮
    // 然后获取当前点击的那个小图片按钮的值并赋值给index，这样子就可以随之跳转
    for(let i=0;i<m.length;i++){
        m[i].addEventListener('click',()=>{
            index = i
            position()
            clearInterval(time)
            timer()
        })
    }
    //最后的最后我们将定时器开起来，这样子图片就可以自动轮播啦
    timer()
</script>

<%--<jsp:include page="footer.jsp"/>--%>
<%@ include file="footer.jsp"%>
